<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D地图展示</title>
    <style>
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }
      #allmap {
        position: relative;
      }
      #tools {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
      }
      .tools-bar {
        display: flex;
      }
      .label {
        width: 80px;
        text-align: right;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"
    ></script>
  </head>
  <body>
    <div id="allmap"></div>
    <div id="tools">
      <div class="tools-bar">
        <div class="label">heading:</div>
        <button id="heading-add">+</button>
        <input type="text" id="heading" value="40" />
        <button id="heading-minus">-</button>
      </div>
      <div class="tools-bar">
        <div class="label">tilt:</div>
        <button id="tilt-add">+</button>
        <input type="text" id="tilt" value="70" />
        <button id="tilt-minus">-</button>
      </div>
      <div class="tools-bar">
        <button id="loop">loop</button>
        <button id="stop">stop</button>
      </div>
    </div>
  </body>
</html>
<script type="text/javascript">
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  let map = new BMapGL.Map("allmap"); // 创建Map实例
  let point = new BMapGL.Point(116.28019, 40.049191);
  map.centerAndZoom(point, 19); // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  map.setHeading(40); // 设置地图旋转角度
  map.setTilt(70); // 设置地图的倾斜角度

  let heading = document.getElementById("heading");
  let headingAdd = document.getElementById("heading-add");
  let headingMinus = document.getElementById("heading-minus");
  let tilt = document.getElementById("tilt");
  let tiltAdd = document.getElementById("tilt-add");
  let tiltMinus = document.getElementById("tilt-minus");
  heading.addEventListener("input", function (e) {
    map.setHeading(e.target.value);
  });
  headingAdd.addEventListener("click", function (e) {
    heading.value++;
    map.setHeading(heading.value);
  });
  headingMinus.addEventListener("click", function (e) {
    heading.value--;
    map.setHeading(heading.value);
  });

  tilt.addEventListener("input", function (e) {
    map.setTilt(e.target.value);
  });
  tiltAdd.addEventListener("click", function (e) {
    tilt.value++;
    map.setTilt(tilt.value);
  });
  tiltMinus.addEventListener("click", function (e) {
    tilt.value--;
    map.setTilt(tilt.value);
  });

  let task;
  document.getElementById("loop").addEventListener("click", function (e) {
    task = setInterval(() => {
      if (loop) {
        heading.value++;
        map.setHeading(heading.value);
      }
    }, 100);
  });

  document.getElementById("stop").addEventListener("click", function (e) {
    task && clearInterval(task);
  });
</script>
